<!DOCTYPE html>
<html lang="en" translate="no">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ViperIDE</title>
    <link rel="icon" type="image/png" href="assets/favicon.png"/>
    <link rel="manifest" href="manifest.json">

    <link rel="stylesheet" href="./app.css">
</head>
<body id="app">
    <div id="tool-panel">
        <div>
            <button onclick="app.toggleSideMenu()"><i class="fa-solid fa-bars"></i></button>
            <span class="logo">ViperIDE</span>
            <button title="Save File [Ctrl+S]"   onclick="app.saveCurrentFile()" id="btn-save"><i class="fa-solid fa-download"></i></button>
            <button title="Run File [F5]"        onclick="app.runCurrentFile()"  id="btn-run"><i class="fa-solid fa-circle-play" id="btn-run-icon"></i></button>
        </div>
        <div>
            <button title="Connect WebREPL"      onclick="app.connectDevice('ws')"  id="btn-conn-ws" ><i class="fa-solid fa-link"></i></button>
            <button title="Connect Bluetooth"    onclick="app.connectDevice('ble')" id="btn-conn-ble"><i class="fa-brands fa-bluetooth-b"></i></button>
            <button title="Connect USB/Serial"   onclick="app.connectDevice('usb')" id="btn-conn-usb"><i class="fa-brands fa-usb"></i></button>
            <button title="Full Screen" onclick="app.toggleFullScreen('app')"  id="app-expand"><i class="fa-solid fa-expand"></i></button>
        </div>
    </div>
    <div id="container">
        <div id="overlay" onclick="app.autoHideSideMenu()"></div>
        <div id="side-menu">
            <div class="tabs" id="menu-tabs">
                <div>
                    <a class="tab active" data-target="menu-files"><i class="fa-solid fa-folder fa-fw"></i></a>
                    <a class="tab" data-target="menu-pkg" onclick="app.loadAllPkgIndexes();return false;"><i class="fa-solid fa-cubes fa-fw"></i></a>
                    <a class="tab" data-target="menu-tools"><i class="fa-solid fa-tools fa-fw"></i></a>
                </div>
                <div>
                    <a class="tab" data-target="menu-settings"><i class="fa-solid fa-sliders fa-fw"></i></a>
                    <a class="tab" data-target="menu-about"><i class="fa-solid fa-circle-info fa-fw"></i></a>
                    <!--button onclick="TODO"><i class="fa-regular fa-message fa-fw"></i></button>
                    <button onclick="TODO"><i class="fa-regular fa-star fa-fw"></i></button-->
                </div>
            </div>

            <div id="menu-files" class="tab-content active">
                <div id="menu-file-title">File Manager</div>
                <div id="menu-file-tree">
                    <div><span class="folder name"><i class="fa-solid fa-folder fa-fw"></i> /</span></div>
                    <div>
                        <a href="#" class="name" onclick="app.connectDevice('usb');return false;">&emsp;🤔 <span id="no-files">no files</span></a>
                        <a href="#" class="menu-action" onclick="app.connectDevice('usb');return false;"><i class="fa-solid fa-plug"></i></a>
                    </div>
                </div>
            </div>
            <div id="menu-pkg" class="tab-content">
                <div id="menu-pkg-title">Package Manager</div>
                <div id="menu-pkg-list">
                </div>
            </div>
            <div id="menu-tools" class="tab-content">
                <div id="menu-tools-title">Tools</div>
                <div id="menu-tools-list">
                    <div class="title-lines" id="menu-tools-line-conn">device connection</div>
                    <div><a href="https://github.com/vshymanskyy/ViperIDE/blob/main/docs/Web-REPL-Relay.md" target="_blank">    <i class="fa-solid fa-arrow-up-right-from-square fa-fw"></i> WebREPL over internet 🌎</a></div>
                    <div><a href="https://github.com/vshymanskyy/ViperIDE/blob/main/docs/Web-REPL-Server.md" target="_blank">   <i class="fa-solid fa-arrow-up-right-from-square fa-fw"></i> WebREPL in local network</a></div>
                    <div><a href="https://github.com/vshymanskyy/ViperIDE/blob/main/docs/Bluetooth-REPL.md" target="_blank">    <i class="fa-solid fa-arrow-up-right-from-square fa-fw"></i> Bluetooth REPL</a></div>
                    <div><a href="bridge.html" target="_blank"><i class="fa-solid fa-arrow-up-right-from-square fa-fw"></i> P2P Bridge</a></div>
                    <div><a href="benchmark.html" target="_blank"><i class="fa-solid fa-arrow-up-right-from-square fa-fw"></i> Device Benchmark</a></div>

                    <div class="title-lines" id="menu-line-pkg-mgr">package manager</div>
                    <div><a href="#" onclick="app.installPkgFromUrl()" id="install-via-url">📦 Install package via link</a></div>

                    <div class="title-lines" id="menu-tools-python">Python</div>
                    <div><a href="#" onclick="app.pyPrettify()" id="py-prettify">🎀 Prettify current file</a></div>
                    <div><a href="#" onclick="app.pyMinify()" id="py-minify">🤏 Minify current file</a></div>

                    <!--div><a href="#" onclick="TODO()" id="download-all">📥 Download all files</a></div>
                    <div><a href="#" onclick="TODO()" id="publish">🚀 Publish on ViperIDE</a></div>

                    <div class="title-lines" id="menu-tools-blynk">Blynk IoT</div>
                    <div><a href="#" onclick="TODO()" id="blynk-ota-package">📦 Generate OTA package</a></div-->
                </div>
            </div>
            <div id="menu-settings" class="tab-content">
                <div id="menu-settings-title">Settings</div>
                <div id="menu-settings-list">
                    <div><input type="checkbox" id="advanced-mode"/><label for="advanced-mode">🔬 Advanced mode</label> (<a href="https://github.com/vshymanskyy/ViperIDE/blob/main/docs/Advanced-Mode.md" target="_blank">?</a>)</div>
                    <div class="title-lines" id="menu-line-conn">connection</div>
                    <div><input type="checkbox" id="interrupt-device" checked/><label for="interrupt-device">Interrupt device</label></div>
                    <div><input type="checkbox" id="force-serial-poly"/><label for="force-serial-poly">Force WebSerial polyfill</label></div>
                    <div class="title-lines" id="menu-line-editor">editor</div>
                    <div><input type="checkbox" id="expand-minify-json" checked/><label for="expand-minify-json">Auto expand/minify JSON</label></div>
                    <div><input type="checkbox" id="use-word-wrap"/><label for="use-word-wrap">Word wrapping</label></div>
                    <div><input type="checkbox" id="render-markdown" checked/><label for="render-markdown">Enable Markdown viewer</label></div>
                    <!--div><input type="checkbox" id="auto-soft-reset" checked/><label for="auto-soft-reset">Soft-reset on Run/Save File</label></div-->
                    <div class="title-lines" id="menu-line-pkg-mgr">package manager</div>
                    <div><input type="checkbox" id="install-package-source"/><label for="install-package-source">Prefer installing sources (.py)</label></div>
                    <div class="title-lines" id="menu-line-other">other</div>
                    <div class="space-between">
                        <label for="lang">Language:</label>
                        <select id="lang">
                            <!-- Indo-European Languages -->
                            <option value="en">🇺🇸 USA, 🇬🇧 British</option>
                            <option value="es">🇪🇸 Español</option>
                            <option value="hi">🇮🇳 हिंदी</option>
                            <option value="fr">🇫🇷 Français</option>
                            <option value="pt">🇵🇹 Português</option>
                            <option value="de">🇩🇪 Deutsch</option>
                            <option value="pl">🇵🇱 Polski</option>
                            <option value="it">🇮🇹 Italiano</option>
                            <option value="uk">🇺🇦 Українська</option>
                            <option value="ro">🇷🇴 Română</option>
                            <option value="nl">🇳🇱 Nederlands</option>
                            <option value="sv">🇸🇪 Svenska</option>
                            <option value="el">🇬🇷 Ελληνικά</option>
                            <option value="ru">🇷🇺🪖🚢🏃🖕</option>

                            <!-- Sino-Tibetan Languages -->
                            <option value="zh-CN">🇨🇳 简体中文</option>
                            <option value="zh-TW">🇹🇼 繁體中文</option>

                            <!-- Afro-Asiatic Languages -->
                            <option value="ar">🇸🇦 العربية</option>
                            <option value="he">🇮🇱 עברית</option>

                            <!-- Altaic Languages -->
                            <option value="ja">🇯🇵 日本語</option>
                            <option value="ko">🇰🇷 한국어</option>

                            <!-- Austronesian Languages -->
                            <option value="id">🇮🇩 Bahasa Indonesia</option>
                        </select>
                    </div>
                    <div class="space-between">
                        <label for="zoom">Zoom:</label>
                        <select id="zoom">
                            <option value="0.80">80%</option>
                            <option value="1.00">100%</option>
                            <option value="1.10">110%</option>
                            <option value="1.25">125%</option>
                            <option value="1.50">150%</option>
                        </select>
                    </div>
                    <div><input type="checkbox" id="use-natural-sort" checked/><label for="use-natural-sort">Use natural sorting</label></div>
                </div>
            </div>
            <div id="menu-about" class="tab-content">
                <a class="github-fork-ribbon left-top" href="https://github.com/vshymanskyy/ViperIDE" target="_blank" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
                <div style="text-align: center; padding: 50px 0 0 0;">
                    <img src="assets/logo_1024.png" alt="Logo" width="30%">
                    <div style="font-size:1.5em;">ViperIDE</div>
                    <div id='viper-ide-version'></div>
                    <small><div id='viper-ide-build'></div></small>
                    <p>
                        MicroPython Web IDE<br>
                        by <a class="link" href="https://x.com/vshymanskyy" target="_blank">Volodymyr Shymanskyy</a>
                    </p>
                </div>
                <div>
                    <hr/>
                    <p id="about-cta">
                        If you like ViperIDE, please <a class="link" id="gh-star">give it a GitHub star</a> ⭐ and spread the word on social media 📢
                    </p>
                    <p id="report-bug">
                        You can also <a class="link" id="gh-issues">report a bug</a> 🐞
                    </p>
                    <hr/>
                </div>
                <p style="text-align: center;">
                    With 💙💛 from <a class="link" href="https://stand-with-ukraine.pp.ua" target="_blank">Ukraine</a>
                </p>
            </div>
        </div>
        <div id="main-editor">
            <div class="tabs" id="editor-tabs"></div>
            <div id="terminal-container">
                <div class="tabs" id="terminal-tabs" onmousedown="app.initDrag(event)" ontouchstart="app.initDrag(event)">
                    <div>
                        <a class="tab active" data-target="xterm"><i class="fa-solid fa-terminal"></i> <span id="tab-term">Terminal</span></a>
                        <!--a class="tab"        data-target="logs"><i class="fa-solid fa-bug"></i> IDE Logs</a-->
                    </div>
                    <div>
                        <button title="Clear" onclick="app.clearTerminal()" id="term-clear"><i class="fa-solid fa-trash-can"></i></button>
                        <button title="Soft Reset" onclick="app.reboot('soft')"><i class="fa-solid fa-arrows-rotate"></i></button>
                        <button title="Hard Reset" onclick="app.reboot('hard')"><i class="fa-solid fa-power-off"></i></button>
                        <button title="Full Screen" onclick="app.toggleFullScreen('terminal-container')" id="term-expand"><i class="fa-solid fa-expand"></i></button>
                    </div>
                </div>
                <div id="xterm" class="tab-content active">
                    <!-- Xterm.js terminal content goes here -->
                </div>
                <div id="logs" class="tab-content">
                    <!-- Logs content goes here -->
                </div>
            </div>
        </div>
    </div>
    <div id="dpi-ruler" style="position:absolute;height:1in;width:1in;left:-100%;top:-100%;"></div>

    <script>window.analytics = { _writeKey: "WdDAz9IvQknVcbSS" }</script>
    <script src="https://unpkg.com/@june-so/analytics-next@2.0.0/dist/umd/standalone.js" integrity="sha256-mm/qRhmZXfHLF27WLTxbnMVhPgFMOsxvjYXk3NpaKnc=" crossorigin="anonymous"></script>

    <script src="https://viper-ide.org/micropython.mjs" type="module" crossorigin="anonymous"></script>
    <script src="./app.js"></script>
</body>
</html>
